<template>
  <view>
    <cu-custom bgColor="bg-white" :isBack="true">
      <block slot="content" class="text-000 text-black">影片详情</block>
    </cu-custom>

    <view class="padding bg-white">
      <!--左边-->
      <view class="flex">
        <!--左边left图片-->
        <view class="margin-right">
          <img :src="$tools.mThumb(movieInfo.imgurl+movieInfo.poster,250)" style="width:180rpx;height:220rpx;"
               class="radius"/>
        </view>
        <!--左边left标题-->
        <view class="text-gray">
          <view class="text-black text-bold text-lg margin-right margin-top-xs">{{ movieInfo.show_name }}</view>
          <view class="margin-top-xs">
            <text class="margin-right-xs" v-if="movieInfo.remark">
              评分
              <text class="text-yellow margin-left">{{ movieInfo.remark }}分</text>
            </text>
            <text class="margin-right-xs text-gray" v-else>暂无评分</text>
          </view>
          <view class="margin-top-xs">
            <text>主演:</text>
            <text>{{ movieInfo.leading_role }}</text>
          </view>
          <view class="margin-top-xs">{{ movieInfo.open_time }}上映</view>
        </view>
      </view>

      <!--影片详情-->
      <view class="margin-top text-sm">
        {{ movieInfo.description }}
      </view>

      <!--视频和剧照-->
      <view class="margin-top-xxl" v-if="movieImgs">
        <view class="justify-between flex padding-bottom cu-item">
          <text class="text-bold text-000 text-df">剧照</text>
          <text class="text-gray" @tap="$tools.goTo('video_image?show_id='+movieInfo.yid)">
            {{ movieInfo.trailer_list.length }}
            <text class="cuIcon-right margin-left-xs"></text>
          </text>
        </view>
        <view class="flex justify-center">
          <img :src="$tools.mThumb(movieInfo.imgurl+item,250)" mode="aspectFill"
               @tap="previewImage(movieInfo.imgurl+item)" style="width:32%;height:220rpx;"
               class="radius margin-right-xs" v-for="(item,index) in movieImgs" :key="index"/>
        </view>
      </view>
    </view>
    <!--购买按钮-->
    <view class="fixed response" style="bottom:20rpx">
      <view class=" bg-red margin-lr-lg padding-tb-sm text-lg radius-xxxl flex justify-center" @tap="buyTicket(movieInfo)">购票</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      options: '',
      movieInfo: '',
      movieImgs: '',
    }
  },
  components: {},
  computed: {},
  created() {

  },
  onLoad(options) {
    this.options = options;
    this.fetchData()
  },
  methods: {
    async fetchData() {

      let params = this.options
      //幻灯片
      let res = await this.$api.movieInfo({...this.options, 'city_name': '南京'})
      console.log('res')
      console.log(res)
      this.movieInfo = res.data.detail
      if (res.data.detail.trailer_list) this.movieImgs = res.data.detail.trailer_list.slice(0, 3)

    },
    previewImage(item) {
      uni.previewImage({current: item, urls: [item]})
    },
    buyTicket(item) {
      this.$tools.goTo('/pages/cinema/movie_cinema',{show_id:item.yid,name:item.show_name})
    }
  }
}
</script>

<style scoped>
</style>